<template>

    <div class="floating_panel">

        <!-- 考勤日历 -->
        <div class="nav">
            <h4>考勤日历</h4>
            <van-icon name="ellipsis" />
        </div>
        <div class="attendance_calendar">
            <van-swipe :loop="false" @drag-start="nextDate">
                <van-swipe-item>
                    <div class="broadcast_map">
                        <div v-for="item in calendarLeft" :key="item.date" >
                            <div class="week_date week">{{ item.week }}</div>
                            <div class="week_date"
                                :class="{ 'date': item.week === '六' || item.week === '日', 'now': item.date === '今', 'select': detailsDate === item.date }"
                                @click="selectedDate(item.date)">
                                {{
                item.date }}</div>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="broadcast_map">
                        <div v-for="item in calendarRight" :key="item.date">
                            <div class="week week_date">{{ item.week }}</div>
                            <div class="week_date"
                                :class="{ 'date': item.week === '六' || item.week === '日', 'select': detailsDate === item.date }"
                                @click="selectedDate(item.date)">{{ item.date }}</div>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 考勤详情 -->
        <div class="attendance_details" v-if="detailsFlag">
            <van-collapse v-model="activeNames">
                <van-collapse-item name="1">
                    <template #title>
                        <div>班次:武汉固定班次(08:30 - 18:00)</div>
                        <div>08:30 - 12:00 , 13:30 - 18:00</div>
                    </template>
                    <span>考勤时间</span>
                    <div class="sign_in_time">
                        <i :class="{ 'didn_it': !details.workShift }"></i>
                        <div class="time">{{ details.workShift || '未打卡' }}</div>
                        <div>上班</div>
                    </div>
                    <b></b>
                    <div class="sign_in_time">
                        <i :class="{ 'didn_it': !details.offDutyTime }"></i>
                        <div class="time">{{ details.offDutyTime || '未打卡' }}</div>
                        <div>下班</div>
                    </div>
                </van-collapse-item>
            </van-collapse>
            <div class="warning">
                <span>{{ details.problem || '考勤正常，继续保持哦~' }}</span>
            </div>
        </div>
        <!-- 我的假期 -->
        <div class="nav">
            <h4>我的假期</h4>
            <van-icon name="ellipsis" @click="goToMan"/>
        </div>
        <div class="my_holiday" @click="goToBa">
            <div class="day">还有17.125天假期哦</div>
            <div class="date">加入公司已经N年N天啦</div>
            <i class="iconfont tea icon-kafeiguan" ></i>
        </div>

        <!-- 团队成员 -->
        <div class="nav">
            <h4>团队成员</h4>
            <van-icon name="ellipsis" />
        </div>
        <div class="team_members">
            <div class="personnel_on_duty">
                <h2>14</h2>
                <div class="grey">在岗人员</div>
            </div>
            <queue :config="[{ title: '实习生', num: 0 }, { title: '试用中', num: 1 }, { title: '离职中', num: 0 }]" />
        </div>

        <!-- 团队考勤 -->
        <div class="nav">
            <h4>团队考勤</h4>
            <van-icon name="ellipsis" />
        </div>
        <div class="attendance_team">
            <ul class="attendance_team_nav" @click="addClass">
                <li class="select" data-id="0">今日考勤</li>
                <li data-id="1">本月考勤</li>
                <li data-id="2">本月勤奋榜</li>
                <li data-id="3">假期余额</li>
            </ul>
            <div class="team_members">
                <div class="directly_subordinate" v-if="active === 0 || active === 1">直属</div>
                <!-- 今日考勤 -->
                <template v-if="active === 0">
                    <div class="team_members_content">
                        <div class="no_anomalies">
                            <van-icon name="smile-o" />
                            <span>今日团队考勤正常，请继续保持哦~</span>
                        </div>
                    </div>
                    <queue :config="[{ title: '实习生', num: 0 }, { title: '试用中', num: 1 }, { title: '离职中', num: 0 }]" />
                </template>
                <!-- 本月考勤 -->
                <template v-else-if="active === 1">
                    <div class="team_members_content">
                        <div class="team_members_item">
                            <div>
                                <h3>{{ monthNormal }}</h3>
                                <span>正常人数</span>
                            </div>
                            <div>
                                <h3>{{ monthAbNormal }}</h3>
                                <span>异常人数</span>
                            </div>
                        </div>
                        <div class="proportion">
                            <div class="normal" :style="{ width: normalValur }"></div>
                            <div class="ab_normal" :style="{ width: abNormalValur }"></div>
                        </div>
                    </div>
                    <queue
                        :config="[{ title: '旷工时长', num: 0 }, { title: '迟到人数', num: 1 }, { title: '早退人数', num: 0 }]" />
                </template>
                <!-- 本月勤奋榜 -->
                <template v-else-if="active === 2">
                    <div>
                        <span>人均工时: </span>
                        <span class="right"> 7.5h</span>
                    </div>
                    <div class="per_capita_working_hours">
                        <diligence :config="{
                width: '1.1rem',
                ranking: 2,
                color: '#8C8C8C',
                name: diligenceList[1].name,
                time: diligenceList[1].time
            }" />
                        <diligence :config="{
                width: '1.5rem',
                ranking: 1,
                color: '#FFD700',
                name: diligenceList[0].name,
                time: diligenceList[0].time
            }" />
                        <diligence :config="{
                width: '1rem',
                ranking: 3,
                color: '#DB9444',
                name: diligenceList[2].name,
                time: diligenceList[2].time
            }" />
                    </div>
                </template>
                <!-- 假期余额 -->
                <template v-else="active === 3">
                    <div class="holiday_balance" v-for="(item, index) in holidayBalance" :key="index">
                        <div class="info">
                            <div class="index">{{ index + 1 }}</div>
                            <div class="img">
                                <van-image round width="0.9rem" height="0.9rem"
                                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                            </div>
                            <div class="details">
                                <p>{{ item.name }}</p>
                                <div>{{ item.department }}</div>
                            </div>
                        </div>
                        <span class="right" s>{{ item.holiday }}天</span>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { useRouter } from "vue-router"
import queue from './components/queue.vue'
import diligence from './components/diligence.vue'
const router = useRouter()
let active = ref(0);

//tabs
const addClass = (e) => {
    if (e.target.tagName !== 'LI') return
    const lis = document.querySelectorAll('li')
    const id = e.target.dataset.id
    active.value = +id
    lis.forEach((item, index) => {
        item.classList.remove('select')
        if (index == id) {
            item.classList.add('select')
        }
    })
}
//日历
const addDate0 = (value) => {
    if (value < 10) {
        return '0' + value
    } else {
        return value
    }
}
const getYear = (dateNow) => {
    let days = [];
    let days1 = [];
    const now = new Date().getDate()
    for (let i = 0; i <= 24 * 6; i += 24) {		//今天加上前6天
        let dateItem = new Date(dateNow - i * 60 * 60 * 1000);	//使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
        let dateItem1 = new Date(dateNow + i * 60 * 60 * 1000);	//使用当天时间戳加上之后的时间毫秒（小时*分*秒*毫秒）
        let m = dateItem.getDay();	//获取星期
        let d = dateItem.getDate();	//获取日期
        let m1 = dateItem1.getDay();//获取星期
        let d1 = dateItem1.getDate();	//获取日期
        d = addDate0(d);	//给为单数的日期补零
        let v = d;
        let a = m;
        let l = d1;
        let u = m1;
        days.push({ date: v, week: a });	//添加至数组
        days1.push({ date: l, week: u });	//添加至数组
    }
    days = days.slice(1, 4)
    days1 = days1.slice(0, 4);
    let day = [...days, ...days1]
    day[0] = day[2];
    day[2] = days[0];
    day.map(item => {
        if (item.date == now) item.date = '今'
        if (item.week == 2) {
            item.week = '二'
        } else if (item.week == 3) {
            item.week = '三'
        } else if (item.week == 4) {
            item.week = '四'
        } else if (item.week == 5) {
            item.week = '五'
        } else if (item.week == 6) {
            item.week = '六'
        } else if (item.week == 0) {
            item.week = '日'
        } else if (item.week == 1) {
            item.week = '一'
        };
    })
    return day
}
const calendarLeft = reactive([])
const calendarRight = reactive([])
const time = new Date().getTime()
const time7 = new Date().getTime() + (7 * 24 * 60 * 60 * 1000)
calendarLeft.push(...getYear(time))
calendarRight.push(...getYear(time7))

//进度条
let monthNormal = ref(12)
let monthAbNormal = ref(1)
const normalValur = computed(() => (monthNormal.value / (monthNormal.value + monthAbNormal.value)) * 99 + '%')
const abNormalValur = computed(() => (monthAbNormal.value / (monthNormal.value + monthAbNormal.value)) * 99 + '%')

//勤奋榜
const diligenceList = reactive([])
diligenceList.push(...[{
    name: 'XXX',
    time: '10.2',
    img: ''
}, {
    name: 'XXX',
    time: '9.0',
    img: ''
}, {
    name: 'XXX',
    time: '8.5',
    img: ''
}])

//假期余额
const holidayBalance = reactive([])
holidayBalance.push(...[
    {
        name: 'XXX',
        department: '产品研发组',
        holiday: 5.313
    },
    {
        name: 'XXX',
        department: '产品研发组',
        holiday: 3.373
    },
    {
        name: 'XXX',
        department: '产品研发组',
        holiday: 3.063
    }
])
//折叠面板
let activeNames = ref(['0'])
let detailsFlag = ref(false)
let detailsDate = ref(0)
const details = ref({
    workShift: '07:32',
    offDutyTime: null,
    problem: null,
})

const selectedDate = (date) => {
    detailsFlag.value = true
    detailsDate.value = date
}
const nextDate = ()=>{
    detailsFlag.value = false
    detailsDate.value = 0
}
const goToMan = ()=>{
    router.push('/management')
}
const goToBa = ()=>{
    router.push('/balance')
}
</script>

<style lang="scss" scoped>

.floating_panel {
    padding: 0 18px 60px;
    span {
        font-size: 12px;
        color: #8c8c8c;

        &.right {
            color: #000;
            padding: 3px 10px;
            background-color: #DCDCDC;
            border-radius: 4px;
        }
    }

    .nav {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
    }

    .attendance_calendar {
        height: 60px;

        .broadcast_map {
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .week_date {
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
            }

            .week {
                color: #6C6C6C;
            }

            .date {
                color: #8C8C8C;
            }

            .now {
                color: $theme_icon;
            }

            .select {

                background-color: $theme_icon;
                border-radius: 50%;
                color: #fff;
            }
        }

        :deep(.van-swipe-item) {
            height: 50px;
        }

        :deep(.van-swipe__indicators) {
            display: none;
        }

        .custom-indicator {
            position: absolute;
            right: 5px;
            bottom: 5px;
            padding: 2px 5px;
            font-size: 12px;
            background: rgba(0, 0, 0, 0.1);
        }
    }

    .attendance_details {
        margin-top: 15px;
        background-color: #F2F2F2;

        :deep(.van-cell--clickable) {
            background-color: #F2F2F2;
        }

        :deep(.van-collapse-item__content) {
            background-color: #F2F2F2;
        }

        .warning {
            padding: 14px;
        }

        .sign_in_time {
            color: #000;
            display: flex;
            align-items: center;

            .time {
                padding: 0 15px;
            }

            i {
                &.didn_it {
                    background-color: #999;
                }

                display: block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: $theme_icon;
            }
        }

        b {
            display: block;
            height: 30px;
            margin-left: 5px;
            border-left: 2px solid #ccc;
        }
    }

    .my_holiday {
        position: relative;
        height: 80px;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 15px;
        background-color: $theme_bg;

        .day {
            color: $theme_icon;
            font-weight: 700;
        }

        .date {
            color: #8C8C8C;
            font-size: 13px;
        }

        .tea {
            position: absolute;
            font-size: 80px;
            color: $theme_icon;
            right: 22px;
            top: -19px;
        }
    }

    .team_members {
        position: relative;
        height: 150px;
        background-color: #F7F7F7;
        border-radius: 4px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .personnel_on_duty {
            text-align: center;
        }

        .team_members_content {
            flex: 1;

            .team_members_item {
                padding-top: 8px;
                display: flex;
                justify-content: space-between;

                div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
            }

            .proportion {
                display: flex;
                justify-content: space-between;
                height: 12px;
                margin-top: 8px;

                .normal {
                    border-radius: 7px;
                    background-color: $theme_icon;
                }

                .ab_normal {
                    border-radius: 7px;
                    background-color: #DCDCDC;
                }
            }

            .no_anomalies {
                padding: 15px;

                i {
                    color: $theme_icon;
                }

            }
        }

        .per_capita_working_hours {
            flex: 1;
            display: flex;
            justify-content: space-around;
            padding-top: 10px;
        }

        .holiday_balance {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .info {
                display: flex;
                align-items: center;

                .index {
                    font-size: 16px;
                    font-weight: 700;
                    color: $theme_icon;
                }

                .img {
                    margin: 0 20px;

                    :deep(.van-image--round) {
                        border: 3px solid #FFD700;
                    }
                }

                .details {
                    height: 35px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    div {
                        font-size: 12px;
                        color: #8C8C8C;
                    }
                }
            }
        }

        .directly_subordinate {
            position: absolute;
            right: 3px;
            top: 3px;
            padding: 2px 8px;
            border-radius: 2px;
            font-size: 12px;
            color: #BBBBBB;
            background-color: #EAEAEA;
        }
    }

    .attendance_team {
        .attendance_team_nav {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #8c8c8c;

            li {
                padding-bottom: 6px;

                &.select {
                    color: $theme_icon;
                    border-bottom: 2px solid $theme_icon;
                }
            }
        }

        .attendance_team_content {
            margin-top: 2px;
            height: 150px;
            background-color: #F7F7F7;
        }
    }
}
</style>